<template>
    <el-row class="mb-4">
    <el-button type="success" @click="visible = true">添加</el-button>
    <el-button type="success" @click="updateMenuCache">更新菜单</el-button>
  </el-row>
     <el-col :span="18"><div class="grid-content ep-bg-purple-dark" />
       <el-table 
        :data="state.menus" stripe style="width: 100%"
           row-key="id"
            border
           default-expand-all
        >
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="name" label="菜单名" width="180" />
        <el-table-column prop="path" label="地址" />
        <el-table-column prop="icon" label="图标" />
        <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
        <el-button link type="danger" size="small"  @click="handleDel(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
      </el-table>
</el-col>
<el-dialog v-model="edit_visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改菜单!</h4>
        
      </div>
    </template>
      <el-form :model="state.edit_form" label-width="120px">
            <el-form-item label="上级菜单">
              <el-select v-model="state.edit_form.pid" class="m-2" placeholder="请选择" size="large">
                <el-option 
                  key="0"
                  label="顶级菜单"
                  value="0"
                />
                <el-option
                  v-for="item in state.menus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名">
              <el-input v-model="state.edit_form.name" />
            </el-form-item>
             <el-form-item label="地址">
              <el-input v-model="state.edit_form.path" />
            </el-form-item>
             <el-form-item label="标识">
              <el-input v-model="state.edit_form.title" />
            </el-form-item>
              <el-form-item label="图标">
              <el-input v-model="state.edit_form.icon" />
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="state.edit_form.order" />
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="editSubmit">更新</el-button>
        <el-button type="danger" @click="edit_visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>
   <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">添加菜单!</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="上级菜单">
              <el-select v-model="state.form.pid" class="m-2" placeholder="请选择" size="large">
                <el-option 
                  key="0"
                  label="顶级菜单"
                  value="0"
                />
                <el-option
                  v-for="item in state.menus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名">
              <el-input v-model="state.form.name" />
            </el-form-item>
             <el-form-item label="地址">
              <el-input v-model="state.form.path" />
            </el-form-item>
             <el-form-item label="标识">
              <el-input v-model="state.form.title" />
            </el-form-item>
              <el-form-item label="图标">
              <el-input v-model="state.form.icon" />
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="state.form.order" />
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>
</template>

<script setup>
import { ArrowLeft,CircleCloseFilled  } from '@element-plus/icons-vue'
import { ref,reactive, onMounted } from 'vue'
import {index,addMenu,updateMenu,delMenu,all}  from '../../api/menu.js'
import { ElMessage } from 'element-plus'

const state = reactive({
   menus:[],
   form:{},
   edit_form:{}
});
const visible = ref(false)
const edit_visible = ref(false)

const handleClose=()=>{

}
const handleDel=(index,row)=>{
  delMenu({id:row.id}).then(res=>{

  })
}
const handleClick=(row,index)=>{

}
const handleEdit = (index,row) => {
  edit_visible.value =true;
  // console.log(row);
  state.edit_form = row;
}
const updateMenuCache = ()=>{
  localStorage.removeItem('menu');
  ElMessage({
            message: '请刷新.',
            type: 'success',
          })
}
const editSubmit=()=>{
  edit_visible.value = false
  updateMenu(state.edit_form).then(res => {
     if(res.code == 200) {
         ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
          })
    }
  })
}

const onSubmit=()=>{
  visible.value = false
  addMenu(state.form).then(res=>{
    if(res.code == 200) {
         ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
          })
    }
  })
}
onMounted(()=>{
  all().then(res=>{
      state.menus = res.data;
    });
});

</script>


<style scoped>
.read-the-docs {
  color: #888;
}
</style>
